<template>
  <div
    v-if="show"
    class="user-info"
    :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
    @click.stop
  >
    <div class="user-info-box">
      <div class="avatar">
        <head-image
          :name="user.nickName"
          :url="user.headImageThumb"
          :size="60"
          :online="user.online"
          @click.native="showFullImage()"
          radius="10%"
        >
        </head-image>
      </div>
      <div class="info-card">
        <div class="header">
          <div class="nick-name">{{ user.nickName }}</div>
          <div
            v-if="user.sex == 0"
            class="icon iconfont icon-man"
            style="color: darkblue"
          ></div>
          <div
            v-if="user.sex == 1"
            class="icon iconfont icon-girl"
            style="color: darkred"
          ></div>
        </div>
        <div class="info-item">用户名: {{ user.userName }}</div>
        <div class="info-item">个性签名: {{ user.signature }}</div>
      </div>
    </div>
    <el-divider content-position="center"></el-divider>
    <div class="btn-group">
      <el-button v-if="isFriend" type="primary" @click="onSendMessage()"
        >发消息</el-button
      >
      <el-button v-else type="primary" @click="onAddFriend()"
        >加为好友</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
interface User {
  nickName: string;
  headImageThumb: string;
  isFriend: boolean;
  sex?: 0 | 1;
  userName: string;
  signature: string;
  online: boolean;
}

const user = reactive<User>({
  nickName: "",
  headImageThumb: "",
  isFriend: false,
  userName: "",
  signature: "",
  online: false,
});
const pos = reactive({ x: 0, y: 0 });
const show = ref<boolean>(false);
const isFriend = computed(() => {
  return user.isFriend;
});
function _open(user: any, newPos: any) {
  show.value = true;
  user.value = user;
  let w = document.documentElement.clientWidth;
  let h = document.documentElement.clientHeight;
  pos.x = Math.min(newPos.x, w - 350);
  pos.y = Math.min(newPos.y, h - 200);
}
function _close() {
  show.value = false;
}
function onSendMessage() {}
function onAddFriend() {}
function showFullImage() {}
</script>

<style lang="scss" scoped></style>
